<template>
  <div id="page-preview">
    <div id="canvasPanel" class="canvas-panel" :style="{
            width: pageData.commonStyle.width +'px' ,
            height: pageData.commonStyle.height +'px',
            backgroundColor: pageData.commonStyle.backgroundColor,
            backgroundImage: `url('${pageData.commonStyle.backgroundImage}')`,
            transform: `scale(${scalePercent})`,
            transformOrigin: '0 0'
        }"  data-id="canvasPanel">
            <edit-shape
                isPreview
                v-for="item in pageData.elements"
                :key="item.uuid"
                :uuid="item.uuid"
                :defaultStyle="item.commonStyle"
                :style="getCommonStyle({width: item.commonStyle.width, height: item.commonStyle.height, left: item.commonStyle.left,top: item.commonStyle.top,position: item.commonStyle.position})"
                >
                <component :style="getCommonStyle({...item.commonStyle, top: 0, left: 0})" :is="item.elName" class="element-on-edit-pane" v-bind="item.propsValue"/>
            </edit-shape>
        </div>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
import {_qk_register_components_object} from '@src/plugins/index'
import editShape from '@components/edit-shape'
import editorProjectConfig from '@src/pages/editor/DataModel'
import { defaultData } from './defaultData.js'
export default {
    data(){
       return {
          getCommonStyle: editorProjectConfig.getCommonStyle,
          editorPaneWidth: 0,
          pageData: editorProjectConfig.pageConfig,
          scalePercent: 100
       }
    },
    props: {
        // canvas画板缩放
        scale: {
            type: Number,
            default: 1
        },
    },
    mounted(){
        this.projectData = JSON.parse(window.localStorage.getItem('_currentProjectData')) || defaultData
        this.pageData = this.projectData.pages[0]
        this.getScale()
    },
    watch: {
    },
    methods:{
        getScale() {
            const offsetWid =document.getElementById('page-preview').offsetWidth
            const pageWidth = this.pageData.commonStyle.width
            this.scalePercent = offsetWid/pageWidth
        }
    },
    beforeDestroyed () {
        if (this.observer) {
            this.observer.disconnect()
            this.observer.takeRecords()
            this.observer = null
        }
    },
    computed:{
        ...mapState({
            // projectData: state => state.editor.projectData,
            // activeElementUUID: state => state.editor.activeElementUUID,
            // activePageUUID: state => state.editor.activePageUUID,
        }),
        ...mapGetters([
            // 'currentPageIndex',
            // 'activeElementIndex',
            // 'activeElement',
            // 'activePage'
        ])
    },
    components:{
        // 批量注册qk组件
        ..._qk_register_components_object,
        // 画板组件
		    [editShape.name]: editShape
    }
}
</script>

<style lang="scss" scoped>
#canvasPanel {
  position: absolute;
  left: 0;
  top: 0;
}
#page-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    &::-webkit-scrollbar{
        width: 0;
        // width:10px;
        height:10px;
    }
    &::-webkit-scrollbar-track{
        background: rgb(239, 239, 239);
        border-radius:2px;
    }
    &::-webkit-scrollbar-thumb{
        background: #bfbfbf;
        border-radius:10px;
    }
    &::-webkit-scrollbar-thumb:hover{
        background: #9e9c9c;
    }
    &::-webkit-scrollbar-corner{
        background: #179a16;
    }
}

</style>
